<template>
    <box title="项目统计">
        <div class="h-full flex flex-col">
            <div class="flex py-[20px] listborder px-[16px] leading-[14px] text-[14px] gap-[30px]">
                <div class="flex-1">项目名称</div>
                <div class="w-[70px] font-[400]">待确认(起)</div>
                <div class="w-[70px]">待处理(起)</div>
            </div>
            <div class="flex-1 cursor-pointer">
              <template v-if="tableData.data.length != 0" v-for="item in tableData.data" :key="item">
                <div class="flex py-[20px] listborder px-[16px] leading-[14px] text-[14px] gap-[30px]">
                  <div class="flex-1 line-clamp-1 leading-[17px]"
                       @click="showAlarmList({ defaultSearch: { projectName: item?.projectName,searchType:1 } })">{{
                      item.projectName
                    }}</div>
                  <div class="w-[70px] font-[400] text-[var(--data-confirmed-color)] text-[20px]"
                       @click="showAlarmList({ defaultSearch: { projectName: item?.projectName, confirm: -1,searchType:1 } })">{{
                      item.waitConfirm
                    }}</div>
                  <div class="w-[70px] text-[var(--data-warning-color)] text-[20px]"
                       @click="showAlarmList({ defaultSearch: { projectName: item?.projectName, dealStatus: 2,searchType:1 } })">{{
                      item.waitDeal }}</div>
                </div>
              </template>
              <nullpng v-else />
            </div>
            <div class="h-[59px] w-[100%] px-[16px] flex justify-center items-center">
                <el-pagination v-model:current-page="searchFrom.page" v-model:page-size="searchFrom.limit" background
                    :layout="PAGE_LAYOUTLEFTS" :total="tableData.total" @size-change="getTableList" size="small"
                    style="color: #fff;" @current-change="getTableList"  :pager-count="3"/>
            </div>
        </div>
    </box>
</template>
<script setup lang="ts">
import nullpng from '@/views/large-data-screen/menu-content/null-png.vue'
import box from '@/views/large-data-screen/component/box.vue'
import { PAGE_LAYOUTLEFTS } from "@/constant";
import { screenprojectStatistics } from '@/api/screen/largeData'
import { showAlarmList } from '@/views/large-data-screen/utils/index'

const tableData = reactive({
    data: [],
    total: 0
});
const searchFrom = ref({
    page: 1,
    limit: 10
});
onMounted(() => {
    getTableList()
})
const getTableList = async () => {
    // 获取表格数据
    screenprojectStatistics({
        searchType: 1,//搜索：1 - 告警 2-巡检  3- 工单
        page: 1,
        limit: 9
    }).then(res => {

        tableData.data = res.result.data
        tableData.total = res.result.total
    })
}


</script>
<style lang="scss" scoped>
.listborder {
    border-bottom: 1px solid #32374D;
}
</style>
